<template>
  <div>
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit" class="form">
      <van-cell-group inset>
        <van-field
          v-model="sms"
          center
          clearable
          label="发送验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="danger"
              v-if="!flag"
              style="border-radius: 20px"
              @click="sendSmsCode"
              >发送验证码
            </van-button>
            <van-button
              type="danger"
              v-else
              disabled
              style="border-radius: 20px; display: flex; color: white"
            >
              <van-count-down
                :time="60000"
                format="ss"
                @finish="finish"
                style="display: inline-block;color: white;
                "

              >
              </van-count-down>
              秒后再次发送
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <van-button
        type="primary"
        size="large"
        :disabled="sms.length < 5"
        style="border-radius: 20px"
        native-type="submit"
      >
        <!-- @click="goContinue" -->
        下一步</van-button
      >
    </van-form>
  </div>
</template>

<script>
import { showNotify, closeNotify } from "vant";
import {
  doCheckPhone,
  doSendMsgCode,
} from "../../service/user.js";
export default {
  data() {
    return {
      flag: false,
      sms: "", // 验证码
      isSmsSend: false, // 是否已经发送了验证码
      sendBtnText: "发送验证码",
      timer: null, // 计数器对象
      counter: 60, // 倒数60秒
      // telObj: {},
      tel: "",
    };
  },
  created() {
    // this.getSendmsgCode();
    this.tel = this.$route.query.tel;
    console.log(this.tel);
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onSubmit() {
      // this.tel = this.$route.query.tel;
      // console.log(this.tel);
      doCheckPhone({ tel: this.tel }).then((res) => {
        console.log(res);
      });
    },
    sendSmsCode() {
      // this.isSmsSend = true; // 禁用按钮
      // this.countDown(); // 开始倒计时
      // this.getSendmsgCode(); // 获取验证码

      doSendMsgCode({ tel: this.tel }).then((res) => {
        if (res.data.code === "200") {
          console.log(res.data);
          showNotify({
            type: "success",
            message: "发送短信验证码成功",
          });
          // 主动关闭
          closeNotify();
          // 传递到本地仓库操作
        }
      });
      this.flag = true;
    },
    finish() {
      this.flag = false;
    },
    countDown() {
      // 倒计时函数
      this.timer = setInterval(() => {
        showNotify({
          type: "success",
          message: "发送短信验证码成功",
          duration: 1000,
        });
        // 替换文本，让秒实时改变
        this.sendBtnText = `${this.counter}秒后重新发送`;
        this.counter--;
        // 当秒数小于0时，取消定时器
        if (this.counter < 0) {
          // clearInterval(this.timer)
          this.reset();
        }
      }, 1000);
    },
    reset() {
      this.isSmsSend = false; // 重置按钮
      this.sendBtnText = "点击发送验证码";
      if (this.timer) {
        clearInterval(this.timer); // 清除定时器
        this.counter = 60; // 重置60秒
        this.timer = null; // 定时器对象为空
      }
    },
    getSendmsgCode() {
      // this.telObj = this.$route.query;
      // console.log(telObj);
      // doSendmsgCode().then((res) => {
      //   console.log(res.data);
      // });
    },
    // goContinue() {
    //   let telObj = this.$route.query;
    //   console.log(telObj);
    //   this.$router.push({
    //     path: "/registerContinue",
    //     query: { telObj: telObj },
    //   });
    // },
  },
};
</script>
<style scoped>
.btn {
  margin: 50px 20px 0px 20px;
}
.btn > .van-button {
  padding: 0px;
}
.form {
  margin-top: 30px;
}
</style>
